<template>
  <div class="score-used-list">

    <Row>
      <Col span="24">
        <Input v-model="query.realName" placeholder="请输入姓名" style="width: 300px"></Input>
        <Button type="primary" @click="search()">查询</Button>
      </Col>
    </Row>

    <Table
      :columns="columns"
      :data="list"
      no-data-text="该查询条件没有任何数据"
      class="mt20">
    </Table>

    <div class="m10 clearfix" v-if="page.total > 0">
      <div class="fr">
        <Page
          show-total
          :total="page.total"
          :current="query.currentPage"
          @on-change="onChangePage">
        </Page>
      </div>
    </div>

    <update-score-modal :form="form" @submit="getList"></update-score-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import vipApi from '@/api/vip'
  import updateScoreModal from './update-score-modal'

  export default {
    name: 'score-used-list',
    components: {
      updateScoreModal
    },
    data () {
      return {
        loading: false,
        query: {
          pkRcId: null,
          align: 'center',
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 50,
            render: (h, params) => {
              return params.row._index + 1
            }
          },
          {
            title: '兑换物品',
            align: 'center',
            key: 'pkSrvProName'
          },
          {
            title: '姓名',
            align: 'center',
            key: 'realName'
          },
          {
            title: '兑换备注',
            align: 'center',
            key: 'usedRemark'
          },
          {
            title: '使用积分',
            align: 'center',
            width: 100,
            key: 'saleScore'
          },
          {
            title: '兑换时间',
            align: 'center',
            key: 'recCreDt',
            width: 150,
            render: (h, params) => {
              let { row } = params
              if (row.recCreDt) {
                return moment(row.recCreDt).format('YYYY-MM-DD HH:mm')
              } else {
                return '-'
              }
            }
          },
          {
            title: '确认时间',
            align: 'center',
            width: 150,
            key: 'confirmDt',
            render: (h, params) => {
              let { row } = params
              if (row.confirmDt) {
                return moment(row.confirmDt).format('YYYY-MM-DD HH:mm')
              } else {
                return '-'
              }
            }
          },
          {
            title: '状态',
            align: 'center',
            width: 80,
            key: 'isConfirm',
            render: (h, params) => {
              let { row } = params
              return row.isConfirm === 0 ? '已确认' : '未确认'
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 80,
            render: (h, params) => {
              let { row } = params
              if (row.isConfirm !== 0) {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.onConfirm(params.row)
                      }
                    }
                  }, '确认')
                ])
              }
            }
          }
        ],
        list: [],
        form: {
          visible: false,
          data: {},
          template: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.scoreUsedList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      onConfirm (data) {
        this.form.visible = true
        this.form.data = data
      },
      search () {
        this.getList()
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  .score-used-list {}
</style>
